<template>
  <view class="page">
    <view class="header">
      <view class="search">
        <up-icon name="search" color="#222" size="28" />
        <input class="input" v-model="key" @input="onChange" type="text" placeholder="去搜索" />
      </view>
    </view>
    <view class="list">
      <my-empty v-if="!List.length" />
      <template v-else>
        <view class="item" v-for="item in List" :key="item.dietCode" @tap="onClick(item)">
          <text>{{ item.dietName }}</text>
          <view class="mark">
            <img
              class="img"
              v-if="mark.find(v => v.dietCode === item.dietCode)"
              src="https://ainengli.meilianshuke.com/jkhx/common/checkbox-active.png"
              alt=""
            />
          </view>
        </view>
      </template>
    </view>
    <view class="footer">
      <view class="box">
        <button class="btn" @tap="confirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, toValue } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import MyEmpty from '@/module/components/MyEmpty/MyEmpty.vue'
import { debounce } from '@/utils/tools'
import request from '@/utils/http'
import bus from '@/utils/bus'

onLoad((query) => {
  type.value = query.type
  url.value = query.url
})

const key = ref('')
const List = ref([])

const mark = ref([])

const type = ref('')
const url = ref('')

const onChange = debounce((e) => {
  console.log(e.detail.value)
  if (e.detail.value.trim()) {
    List.value = []
    api(e.detail.value).then((res) => {
      List.value = res
    })
  } else {
    List.value = []
  }
}, 300)

const api = (key) => {
  return new Promise((resolve, reject) => {
    if (type.value === 'inner') {
      const u = url.value + key
      request.get({ url: u }).then((res) => {
        console.log(res.data)
        resolve(res.data)
      })
    } else {
      const u = url.value + key
      uni.request({
        url: u,
        method: 'GET',
        header: {
          'Content-Type': 'application/json'
        },
        dataType: 'json',
        success: (respoones: any) => {
          console.log(respoones.data.data)
          resolve(respoones.data.data)
        }
      })
    }
  })
}

const onClick = (item) => {
  const i = mark.value.findIndex(v => v.dietCode === item.dietCode)
  if (i > -1) {
    mark.value.splice(i, 1)
  } else {
    mark.value.push(item)
  }
}

const confirm = () => {
  bus.emit('onSearch', toValue(mark.value))
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  flex: 0 0 auto;
  width: 750rpx;
  padding: 32rpx 32rpx 0 32rpx;
}
.search {
  width: 100%;
  height: 84rpx;
  padding: 0 24rpx;
  background: #ffffff;
  border-radius: 42rpx;
  border: 2rpx solid #000000;
  display: flex;
  align-items: center;
  .input {
    width: 100%;
    height: 42rpx;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #222222;
    line-height: 42rpx;
  }
}
.list {
  flex: 1 1 auto;
  overflow: auto;
  .item {
    width: 100%;
    min-height: 108rpx;
    padding: 32rpx 32rpx 34rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    color: #222222;
    line-height: 42rpx;
    .mark {
      margin-left: 16rpx;
      height: 40rpx;
      width: 40rpx;
    }
    .img {
      height: 40rpx;
      width: 40rpx;
    }
  }
}
.footer {
  flex: 0 0 auto;
  padding-bottom: calc(24rpx + constant(safe-area-inset-top));
  padding-bottom: calc(24rpx + env(safe-area-inset-top));
  .box {
    padding: 24rpx 32rpx;
  }
  .btn {
    width: 686rpx;
    height: 88rpx;
    background: #00d1b6;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    border: 2rpx solid #00d1b6;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
  }
}
</style>
